<template>
 <GlobalCardBox title="个人空间设置" :showDown="this.SPACESETDOWN">
     <!-- 遮罩层 -->
    <div slot="maskLayer" class="maskLayer" v-if="submitState == 2"></div>
  
    <div slot="content" id="content">
        <div v-for="(item,index) in authorityData" :key="index" class="dataOne flex">
            <div class="label">{{item.label}}</div>
            <!-- 开关 -->
             <el-switch
                    v-model="form[item.name]"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="gray"
                    >
             </el-switch>
        </div>
       
        <!-- 提交按钮 -->
        <div  class="submitBox flex">
            <el-button class="submit" v-if="submitState == 1" round icon="el-icon-position" @click="submit">保存设置</el-button>
            <el-button class="submit" v-else-if="submitState == 2" round disabled icon="el-icon-loading">提交中</el-button>
       </div>
    </div>
</GlobalCardBox>
</template>
<script>
import GlobalCardBox from '@/components/Package/GlobalCardBox/GlobalCardBox.vue'
import { mapActions, mapMutations, mapState } from 'vuex'
import common from "@/common/global"
  export default 
  {
     components: { GlobalCardBox },
     name :'', 
     computed:{
        ...mapState('Personal',['PersonalData']),
     },
     data() {
        return {
            form:null,
            submitState:0, // 0:无 1:正常 2:提交中
            //权限控制
            authorityData:[
                {label:'是否允许别人访问空间',name:'userViewed'},
                {label:'是否允许别人查看喜欢',name:'userLikeViewed'},
                {label:'是否允许别人查看收藏',name:'userCollectViewed'}
            ]
        }
     },
     created(){
       this.form =  Object.assign({},this.PersonalData)
     },
     watch:{
        form:{
            deep:true,
             handler(newValue,oldValue){
                //信息改变，出现提交按钮
                if(oldValue!=null)
                this.submitState = 1
             }
        }
     },
     methods: {
        ...mapMutations('Personal',['SPACESETDOWN','SETPERSONALDATA']),
        ...mapActions('Login',['editUser']), //修改用户信息
        async submit(){
           this.submitState = 2  
       
           let res = await this.editUser(this.form)
           if(res.code == 200)   { //成功
               this.$message.success(res.message)
               this.submitState = 1
               this.SETPERSONALDATA(res.data)
           }
           else if(res.code == -1) { //Token 解析失败
               this.SPACESETDOWN()
               common.tokenFaile()
           }
           //一般错误
           else if(res.code != 200) this.$message.error(res.message)
            let timer = setTimeout(() => {
                this.submitState = 1
                clearTimeout(timer)
            }, 100);
        },

     },
  }
</script>
<style scoped lang='less'>
#content{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

    .dataOne{
        width: 100%;
        margin: 10px;
        color: var(--fontColor);
    }
    .label{
        margin-right: 5px;
        font-size: 18px;
    }
     
}
.submitBox{
    width: 100%;
    position: absolute;
    bottom: 10px;

    .submit{
        background: var(--GeneralBackColor);
        color: white;
        width: 200px;
        border: none;
    }
}

</style>